<template>
	<view class="container talent-container">
		<view class="index-top">
			<image class="page-bg" :src="config.fileUrl+'page-bg.png'" mode="widthFix"></image>
			<view class="index-top-main">
				<view class="index-top-title">中医药区域型TTO科技成果转化“1+N”</view>
				<view class="index-top-tips">聚焦专业细分产业领域为聚焦，围绕中医药战略性新兴产业</view>
			</view>
		</view>
		<view>
			<IndexAction @search="search" />
		</view>
		<view class="page-content">
			<view class="type-btn-box">
				<!-- <text class="yuan-btn type-btn" :class="pageType===''?'btn-primary':'btn-default'">全部</text> -->
				<text class="yuan-btn type-btn" @click="setPageType('技术经纪人')"
					:class="pageType==='技术经纪人'?'btn-primary':'btn-default'">技术经纪人</text>
				<text class="yuan-btn type-btn" @click="setPageType('专家')"
					:class="pageType==='专家'?'btn-primary':'btn-default'">专家</text>
				<text class="yuan-btn type-btn" @click="setPageType('专家团队')"
					:class="pageType==='专家团队'?'btn-primary':'btn-default'">专家团队</text>
			</view>
			<view class="page-list-box">
				<template v-for="item in pageList" :key="item.id">
					<view class="userlist-one" @click="jumpDetail(item.id)">
						<UserList :listInfo="item" />
					</view>
				</template>
				
			
			</view>

			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>

		</view>

	</view>
</template>


<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import config from '@/common/config.js'
	import UserList from '@/components/userList.vue'
	import IndexAction from '@/components/indexAction.vue'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { hideLoading, showLoading } from '@/common/util';
	import api from '@/common/api';
	const isLoading = ref(false)
	const pageType = ref('技术经纪人')
	const jumpDetail = (id : string) => {
		uni.navigateTo({ url: '/pages/talent/detail?id=' + id + '&pageType=' + pageType.value })
	}
	const setPageType = (type : string) => {
		pageType.value = type
		refreshList()
	}

	onMounted(() => {
		getList()
	})

	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 100);
	})
	const search = (str : string) => {
		keywords.value = str
		refreshList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum.value = 1
		pageList.value = []
		getList()
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum.value = pageNum.value + 1
		getList()
	}
	const notMore = ref(true)
	const pageList = ref<any[]>([])
	const pageSize = 10
	const pageNum = ref(1)
	const keywords = ref('')
	const getList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const data:any={
				pageNum: pageNum.value,
				pageSize,
				name: keywords.value,
				userType: pageType.value === '技术经纪人' ? '' : pageType.value,
			}
			if(pageType.value === '技术经纪人'){
				data.hasTechnicalRepresentative=1
			}
			const res = await api.findTalentPoolMessage(data)
			if (res.data.rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(res.data.rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}

	}
</script>

<style lang="scss">
	.talent-container {
		padding-bottom: 200rpx;

		.index-top {
			position: relative;
		}

		.page-bg {
			width: 100%;
			height: 500rpx;
		}

		.index-top-main {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.index-top-title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.index-top-tips {
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.page-content {
			padding: 0 20rpx;
			margin-top: 20rpx;
		}

		.type-btn-box {}

		.type-btn {
			height: 60rpx;
			border-radius: 8rpx;
			width: 140rpx;
			font-size: 24rpx;
			display: inline-flex;
			margin-right: 20rpx;
		}

		.page-list-box {
			margin-top: 20rpx;
		}
		.userlist-one
		{
			width: 49%;
			margin-right: 2%;
			display: inline-block
		}
		.userlist-one:nth-child(2n) {
			margin-right: 0;
		}

	}
</style>